<template>
  <div class="ContentBox">
    <div class="ContentBtn">
      <!-- 内容按钮 -->
      <el-button type="primary" @click="$emit('TopBtn')" v-if="!hidden">{{ BtnText }}</el-button>
      <el-button type="primary" @click="$emit('TopBtn')" class="TopBtnTwo" v-if="hiddens" >{{ BtnTextTwo }}</el-button>
    </div>
    <!-- 内容表格  -->
    <div class="table">
      <el-table
        :data="tableData"
        border
        style="width: 100%;"
        size="mini"
        :header-cell-style="StyleFn"
      >
        <el-table-column
          prop="date"
          label="序号"
          width="67"
          type="index"
          align="center"
        />
        <el-table-column
          v-if="$route.meta.TableText.onePo"
          prop="code"
          :label="$route.meta.TableText.onePo"
          min-width="150"
          align="center"
        />
        <el-table-column
          v-if="$route.meta.TableText.twoPo"
          prop="name"
          :label="$route.meta.TableText.twoPo"
          min-width="150"
          align="center"
        />
        <el-table-column
          v-if="$route.meta.TableText.threePo"
          prop="type"
          :label="$route.meta.TableText.threePo"
          min-width="150"
          align="center"
        />
        <el-table-column
          v-if="$route.meta.TableText.fourPo"
          prop="location"
          :label="$route.meta.TableText.fourPo"
          width="150"
          align="center"
        />
        <el-table-column
          v-if="$route.meta.TableText.fixPo"
          prop="address"
          :label="$route.meta.TableText.fixPo"
          width="150"
          align="center"
        />
        <el-table-column
          v-if="$route.meta.TableText.sixPo"
          prop="status"
          :label="$route.meta.TableText.sixPo"
          width="150"
          align="center"
        />
        <el-table-column
          v-if="$route.meta.TableText.sevenPo"
          prop="surface"
          :label="$route.meta.TableText.sevenPo"
          width="150"
          align="center"
        />
        <el-table-column
          v-if="$route.meta.TableText.eightPo"
          prop="includedNum"
          :label="$route.meta.TableText.eightPo"
          width="150"
          align="center"
        />
        <el-table-column
          v-if="$route.meta.TableText.ninePo"
          prop="personName"
          :label="$route.meta.TableText.ninePo"
          width="150"
          align="center"
        />
        <el-table-column
          v-if="$route.meta.TableText.tenPo"
          prop="phone"
          :label="$route.meta.TableText.tenPo"
          width="150"
          align="center"
        />
        <el-table-column
          v-if="$route.meta.TableText.tenOnPo"
          prop="updateTime"
          :label="$route.meta.TableText.tenOnPo"
          width="150"
          align="center"
        />
        <slot />
        <el-table-column
          fixed="right"
          label="操作"
          width="210"
          align="center"
          v-if="!OperationBtn"
        >
          <template #default="{row}" >
            <el-button type="text" size="small" @click="$emit('OneBtn', row)" v-if="$route.meta.Btn.BtnOne">{{$route.meta.Btn.BtnOne}}</el-button>
            <el-button type="text" size="small" @click="$emit('TypeChange', row)" v-if="$route.meta.Btn.BtnTwo">{{$route.meta.Btn.BtnTwo}}</el-button>
            <el-button type="text" size="small" @click="DelFn(row)" v-if="$route.meta.Btn.BtnThree">{{$route.meta.Btn.BtnThree}}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :page-sizes="[10, 20, 30, 40]"
        :page-size="+pagecount.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="+pagecount.total"
        @current-change="handleCurrentChange"
        @size-change="sizeChange"
      />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: () => { }
    },
    BtnText: {
      type: String,
      default: ''
    },
    BtnTextTwo: {
      type: String,
      default: ''
    },
    pagecount: {
      type: Object,
      default: () => { }
    }
  },
  data() {
    return {
      // 白名单
      // 表格按钮 1
      TopBtnhidden: ['承运商管理'],
      // 表格按钮 2
      TopBtnhiddens: ['盘点单'],
      // 表格操作
      Operation: ['承运商管理']
    }
  },
  created() {
    console.log(this.tableData)
  },
  methods: {
    StyleFn() {
      return 'background-color:#f9f6ee'
    },
    DelFn(row) {
      console.log(row)
      this.$notify({
        title: '提示',
        message: '演示系统，不支持此操作',
        type: 'warning'
      })
    },
    handleCurrentChange(val) {
      this.$emit('CurrentChange', val)
    },
    sizeChange(val) {
      this.$emit('SizeChange', val)
    }
  },
  computed: {
    // 表格按钮 1
    hidden() {
      return this.TopBtnhidden.includes(this.$route.meta.title)
    },
    // 表格按钮 2
    hiddens() {
      return this.TopBtnhiddens.includes(this.$route.meta.title)
    },
    // 表格操作
    OperationBtn() {
      return this.Operation.includes(this.$route.meta.title)
    }
  }
}
</script>

<style lang="scss">
// 改变hover背景色
.el-table tbody tr:hover>td {
  background: #fff6e2 !important;
}
// 内容盒子
.ContentBox{
    // 内容按钮盒子
    .ContentBtn{
      width: 100%;
      // 新建按钮
      .el-button{
        height: 40px;
    border-radius: 20px;
    border: 0;
    font-size: 14px;
    font-family: PingFangSC,PingFangSC-Medium;
    font-weight: 500;
    text-align: center;
    line-height: 15px;
    cursor: pointer;
    outline: 0;
    min-width: 110px;
    margin:20px;
    background-color: #00be76;
      }
      .TopBtnTwo{
        background-color: #f8f5f5;
        color:#333;
        &:hover{
          background-color: #ffb200;
        }
      }
    }
    // 表格盒子
    .table{
      width: 100%;
      min-height:300px;
    }
    // .el-table--scrollable-x .el-table__body-wrapper{
    //   min-height: 350px;
    // }
      // 设置滚动条宽度
      ::v-deep .el-table__body-wrapper::-webkit-scrollbar {
          width: 8px !important;
          height: 8px !important;
          background: rgba(10, 122, 227, 0.01);
        }

        //滚动条的哈滑块
        ::-webkit-scrollbar-thumb {
          background: #e0d8d6;
          border-radius: 3px;
        }
  .el-pagination{
    width: 100%;
    text-align: center;
  }
}
</style>
